// pages/transaction/transaction.scss
.transaction-container {
  min-height: 100vh;
  background: #f5f5f5;
}

/* 自定义导航栏 */
.custom-nav {
  background: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  
  .nav-content {
    display: flex;
    align-items: center;
    height: 88rpx;
    padding: 0 20rpx;
  }
  
  .nav-back {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10rpx 20rpx 10rpx 10rpx;
    margin-right: 10rpx;
    
    &:active {
      opacity: 0.5;
    }
    
    .back-icon {
      width: 48rpx;
      height: 48rpx;
    }
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    line-height: 88rpx;
  }
  
  .nav-placeholder {
    width: 68rpx;
  }
}

.main-content {
  padding-top: 200rpx;
}

/* 收支概览卡片 */
.overview-card {
  background: white;
  padding: 30rpx;
  margin: 20rpx 30rpx;
  border-radius: 20rpx;
  
  .overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .overview-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .month-selector {
      display: flex;
      align-items: center;
      gap: 10rpx;
      padding: 10rpx 20rpx;
      background: #f5f5f5;
      border-radius: 30rpx;
      
      .month-text {
        font-size: 26rpx;
        color: #666;
      }
      
      .dropdown-icon {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
  
  .overview-stats {
    display: flex;
    justify-content: space-around;
    
    .stat-item {
      text-align: center;
      
      .stat-label {
        display: block;
        font-size: 26rpx;
        color: #999;
        margin-bottom: 15rpx;
      }
      
      .stat-amount {
        display: block;
        font-size: 48rpx;
        font-weight: 600;
        margin-bottom: 10rpx;
        
        &.income {
          color: #5cb85c;
        }
        
        &.expense {
          color: #ff4757;
        }
      }
      
      .stat-change {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8rpx;
        font-size: 24rpx;
        
        &.positive {
          color: #5cb85c;
        }
        
        &.negative {
          color: #ff4757;
          
          .arrow-icon {
            transform: rotate(180deg);
          }
        }
        
        .arrow-icon {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
  }
}

/* 收支分类 */
.category-section {
  background: white;
  padding: 30rpx;
  margin: 0 30rpx 20rpx;
  border-radius: 20rpx;
  
  .section-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 25rpx;
  }
  
  .category-grid {
    display: flex;
    justify-content: space-around;
    
    .category-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15rpx;
      
      .category-icon-wrapper {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &.income {
          background: #ffebee;
        }
        
        &.expense {
          background: #e3f2fd;
        }
        
        .category-icon {
          width: 56rpx;
          height: 56rpx;
        }
      }
      
      .category-name {
        font-size: 24rpx;
        color: #666;
      }
      
      .category-amount {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
      }
    }
  }
}

/* 收支明细 */
.detail-section {
  background: white;
  padding: 30rpx;
  margin: 0 30rpx 30rpx;
  border-radius: 20rpx;
  
  .section-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 25rpx;
  }
  
  .tabs {
    display: flex;
    gap: 20rpx;
    margin-bottom: 30rpx;
    overflow-x: auto;
    
    .tab-item {
      padding: 12rpx 30rpx;
      background: #f5f5f5;
      border-radius: 30rpx;
      font-size: 26rpx;
      color: #666;
      white-space: nowrap;
      
      &.active {
        background: #ffebee;
        color: #ff4757;
        font-weight: 600;
      }
    }
  }
  
  .transaction-list {
    .transaction-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .transaction-info {
        flex: 1;
        
        .transaction-title {
          display: block;
          font-size: 28rpx;
          color: #333;
          margin-bottom: 10rpx;
        }
        
        .transaction-time {
          display: block;
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .transaction-amount {
        font-size: 32rpx;
        font-weight: 600;
        
        &.income {
          color: #5cb85c;
        }
        
        &.expense {
          color: #ff4757;
        }
      }
    }
  }
}
